<template>
  <div class="winwing-container">
    <!-- 主界面 -->
    <div class="main-container">
      <div class="header">
        <h1>WINWING</h1>
        <div class="breadcrumb">
          <span>首页</span>
          <span class="separator">></span>
          <span>主目录分类</span>
        </div>
      </div>

      <div class="toolbar">
        <div class="search-section">
          <el-input
            v-model="searchQuery"
            placeholder="搜索主目录"
            class="search-input"
            clearable
          />
          <el-select v-model="statusFilter" class="status-select">
            <el-option label="全部" value="all" />
            <el-option label="启用" value="active" />
            <el-option label="禁用" value="inactive" />
          </el-select>
        </div>
      </div>

      <el-table :data="filteredCategories" style="width: 100%" border>
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="name" label="主目录分类" />
        <el-table-column prop="sortOrder" label="购物网站排序" width="150" />
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'danger'">
              {{ row.status === 'active' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button size="small" @click="openEditDialog(row)">修改</el-button>
            <el-button size="small" type="danger" @click="deleteCategory(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <span class="page-size">50条/页</span>
        <el-pagination
          layout="prev, pager, next"
          :total="categories.length"
          :page-size="50"
          :current-page="currentPage"
          @current-change="handlePageChange"
        />
        <el-input-number
          v-model="goToPage"
          :min="1"
          :max="Math.ceil(categories.length / 50)"
          controls-position="right"
          class="go-to-input"
        />
        <el-button type="primary" class="go-button" @click="jumpToPage">前往</el-button>
      </div>

      <el-button type="primary" class="add-button" @click="openAddDialog">新增</el-button>
    </div>

    <!-- 封装的组件：新增/编辑弹窗 -->
    <CategoryDialog
      v-model="dialogVisible"
      :formData="currentCategory"
      :dialogType="dialogType"
      @submit="handleSubmit"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import CategoryDialog from './components/CategoryDialog.vue' 

// 定义响应式变量区
const searchQuery = ref('')
const statusFilter = ref('all')
const currentPage = ref(1)
const goToPage = ref(1)
const dialogVisible = ref(false)
const dialogType = ref('add')
const currentCategory = ref({
  id: null,
  nameCn: '',
  nameEn: '',
  sortOrder: 12,
  status: 'active'
})


//逻辑区
//假数据，方便通过数字进行筛选搜索，测试是否能正常工作
const categories = ref([
  { id: 2356, name: 'combat flight control_飞行器1', sortOrder: 1, status: 'active' },
  { id: 2645, name: 'combat flight control_飞行器2', sortOrder: 2, status: 'active' },
  { id: 2632, name: 'combat flight control_飞行器3', sortOrder: 3, status: 'inactive' },
  { id: 2630, name: 'combat flight control_飞行器4', sortOrder: 6, status: 'active' },
  { id: 2662, name: 'combat flight control_飞行器5', sortOrder: 5, status: 'active' },
  { id: 2699, name: 'combat flight control_飞行器6', sortOrder: 4, status: 'active' },
  { id: 2369, name: 'combat flight control_飞行器7', sortOrder: 9, status: 'active' },
  { id: 2566, name: 'combat flight control_飞行器8', sortOrder: 11, status: 'active' }
])

//筛选逻辑，可通过id和名字过滤所需数据
const filteredCategories = computed(() => {
  return categories.value.filter(item => {
    //绑定搜索内容
    const query = searchQuery.value.toLowerCase()
    const matchesSearch =
      item.name.toLowerCase().includes(query) ||
      String(item.id).includes(query)
    //绑定状态筛选
      const matchesStatus =
      statusFilter.value === 'all' ||
      (statusFilter.value === 'active' && item.status === 'active') ||
      (statusFilter.value === 'inactive' && item.status === 'inactive')
    return matchesSearch && matchesStatus
  })
})

const openAddDialog = () => {
  dialogType.value = 'add'
  currentCategory.value = {
    id: Date.now(),
    nameCn: '',
    nameEn: '',
    sortOrder: 12,
    status: 'active'
  }
  dialogVisible.value = true
}

const openEditDialog = (row) => {
  dialogType.value = 'edit'
  const [nameEn = '', nameCn = ''] = row.name.split('_')
  currentCategory.value = {
    ...row,
    nameCn,
    nameEn,
  }
  dialogVisible.value = true
}

const deleteCategory = (row) => {
  ElMessageBox.confirm('确定要删除这条记录吗?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    categories.value = categories.value.filter(item => item.id !== row.id)
    ElMessage.success('删除成功')
  }).catch(() => {})
}

const handleSubmit = (formData) => {
  if (dialogType.value === 'add') {
    categories.value.unshift({
      ...formData,
      name: formData.nameEn + '_' + formData.nameCn 
    })
    ElMessage.success('新增成功')
  } else {
    const index = categories.value.findIndex(item => item.id === formData.id)
    if (index !== -1) {
      categories.value[index] = {
        ...formData,
        name: formData.nameEn + '_' + formData.nameCn
      }
      ElMessage.success('修改成功')
    }
  }
}

const handlePageChange = (page) => {
  currentPage.value = page
}

const jumpToPage = () => {
  if (goToPage.value >= 1 && goToPage.value <= Math.ceil(categories.value.length / 50)) {
    currentPage.value = goToPage.value
  }
}
</script>

<style scoped>
.winwing-container {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f7fa;
}

.header {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.header h1 {
  color: #409eff;
  margin-bottom: 8px;
}

.breadcrumb {
  font-size: 14px;
  color: #606266;
}

.breadcrumb .separator {
  margin: 0 8px;
  color: #c0c4cc;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.search-section {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}

.status-select {
  width: 120px;
}

.pagination-container {
  display: flex;
  align-items: center;
  margin-top: 20px;
  padding: 10px 0;
}

.page-size {
  margin-right: 20px;
  color: #606266;
}

.go-to-input {
  width: 80px;
  margin: 0 10px;
}

.go-button {
  margin-left: 10px;
}

.add-button {
  margin-top: 20px;
  float: right;
}

:deep(.el-table) {
  margin-top: 20px;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  font-weight: bold;
}
</style>